<template>
  <div
    class="bg-fixed bg-center bg-cover bg-no-repeat size-full lg:bg-[url(https://cd.sealmg.com/assets/img/login-page-bg.png)] max-lg:bg-[url(https://cd.sealmg.com/assets/img/mobile/login-page-bg.png)]"
  >
    <!-- {{ newsData.banner }} -->
    <div class="max-w-[120rem] lg:aspect-[75/23] mx-auto lg:flex relative hidden overflow-hidden">
      <div v-swiper:mySwiper="swiperOption" class="size-full">
        <div class="swiper-wrapper">
          <div class="swiper-slide size-full" v-for="(i, index) in newsData && newsData.banner" :key="index">
            <nuxt-link class="size-full object-cover" :to="localePath(`${i.link_url}`)">
              <img loading="lazy" :src="i.image" class="size-full object-cover cursor-pointer" alt="News banner image" title="News banner slide" />
            </nuxt-link>
          </div>
        </div>
        <div class="swiper-button-prev hidden lg:flex z-50 justify-center items-center bg-black/30 hover:bg-black !w-auto !h-auto p-2 rounded-full">
          <i class="el-icon-arrow-left text-[1.25rem] text-white"></i>
        </div>
        <div class="swiper-button-next hidden lg:flex z-50 justify-center items-center bg-black/30 hover:bg-black !w-auto !h-auto p-2 rounded-full">
          <i class="el-icon-arrow-right text-[1.25rem] text-white"></i>
        </div>
      </div>
    </div>
    <div class="max-w-7xl mx-auto">
      <!-- swiper  pc-->
      <!-- swiper  pc-->
      <!-- swiper  h5 -->
      <!-- swiper  h5 -->
      <!-- {{ newsData.banner }} -->
      <div class="max-lg:block hidden">
        <div class="w-full mx-auto overflow-hidden">
          <div v-swiper:mySwiper="swiperOptions" class="">
            <div class="swiper-wrapper aspect-[75/23]">
              <NuxtLink class="swiper-slide h-full" v-for="(i, index) in newsData && newsData.banner" :key="index" :to="localePath(`${i.link_url}`)">
                <img :src="i.image" class="object-cover h-full" loading="lazy" :alt="i.image_alt" :title="i.image_alt" />
              </NuxtLink>
            </div>
            <!-- <div
              class="swiper-button-prev flex justify-center items-center rounded-[.25rem] bg-[#868686]"
            >
              <i class="el-icon-arrow-left text-[1.25rem] text-white"></i>
            </div>
            <div
              class="swiper-button-next flex justify-center items-center rounded-[.25rem] bg-[#868686]"
            >
              <i class="el-icon-arrow-right text-[1.25rem] text-white"></i>
            </div> -->
          </div>
        </div>
      </div>
      <!-- 游戏新闻pc -->
      <!-- 游戏新闻pc -->
      <div class="flex-col gap-[3.125rem] py-[2.5rem] lg:flex hidden">
        <h1 class="text-[1.5rem] text-[#666] mx-auto font-bold capitalize">
          {{ $t('pages.newsList') }}
        </h1>
        <div class="grid grid-cols-2 gap-[3.75rem]" v-if="listCopy.length">
          <NuxtLink class="h-[21.5625rem] rounded-[.5rem] relative overflow-scroll cursor-pointer border" :to="goPage(listCopy[0])">
            <div class="size-full overflow-hidden">
              <img
                v-lazy="$globalFn.imgPrefixUrl(listCopy[0].cover || '')"
                class="size-full object-cover"
                :alt="listCopy[0].cover_alt"
                loading="lazy"
                :title="listCopy[0].cover_alt"
              />
            </div>
            <div class="absolute bottom-0 left-0 text-white p-[1.25rem] w-full bg-black/60">
              <p class="text-[1.25rem] line-clamp-1">
                {{ listCopy[0].title }}
              </p>
            </div>
          </NuxtLink>
          <div class="flex flex-col justify-between h-[21.5625rem]">
            <div class="flex flex-col flex-1 overflow-scroll">
              <div class="grid grid-cols-4 py-[.625rem] border-b select-none">
                <div
                  v-for="(i, k) in newsData.game_news"
                  :key="k"
                  @click="changeTab(i, k)"
                  class="text-[1.125rem] cursor-pointer relative w-full flex justify-center"
                  :class="k === listKey ? 'text-black  font-semibold' : 'text-black/50'"
                >
                  <div class="line-clamp-1 w-full mx-2 text-center capitalize">
                    {{ i.name }}
                  </div>
                  <img
                    v-if="k === listKey"
                    src="https://cd.sealmg.com/assets/img/news_xuanzhong.png"
                    alt="Selected category indicator"
                    title="Active category marker"
                    class="w-[30%] aspect-[2.25/0.38] absolute -bottom-2 left-1/2 -translate-x-1/2 object-cover"
                    loading="lazy"
                  />
                </div>
              </div>
              <div class="py-[.625rem] flex-grow flex flex-col gap-[1.25rem] text-[.875rem] font-medium overflow-y-scroll">
                <NuxtLink v-for="(i, k) in list" :key="k" :to="goPage(i)" class="flex items-center justify-between flex-none gap-[1.25rem] w-full">
                  <div class="flex items-center gap-[1.25rem]">
                    <el-tag type="danger" size="mini">
                      {{ i.category.name }}
                    </el-tag>
                    <div class="text-[#262626] line-clamp-1 cursor-pointer hover:underline hover:underline-offset-4">
                      {{ i.title }}
                    </div>
                  </div>
                  <div class="text-[#999999] flex-none">
                    {{ i.publish_time_text }}
                  </div>
                </NuxtLink>
              </div>
            </div>
            <NuxtLink
              v-if="list.length > 0"
              :to="readmore()"
              class="w-full h-[2.75rem] bg-[#F0F0F0] flex justify-center items-center flex-none text-[.875rem] text-[#999999] capitalize"
            >
              <div class="cursor-pointer">
                <span>{{ $t('pages.readMore') }}</span>
                <!-- <span
                class="text-[#FF4D32] hover:underline hover:underline-offset-4"
                >最新活动</span
              > -->
                <i class="el-icon-arrow-right ml-[.3125rem]"></i>
              </div>
            </NuxtLink>
          </div>
        </div>
      </div>
      <!-- 游戏新闻h5 -->
      <!-- 游戏新闻h5 -->
      <div class="max-lg:flex flex-col hidden px-4">
        <div class="max-lg:mb-4 grid grid-cols-4 py-3 border-b">
          <div
            v-for="(i, k) in newsData.game_news"
            :key="k"
            class="cursor-pointer text-[0.81rem] w-full flex justify-center select-none relative"
            :class="k === listKey ? 'text-[#000] font-medium' : 'text-[#999999] '"
            @click="changeTab(i, k)"
          >
            <div class="line-clamp-1 w-full px-1 text-center capitalize">
              {{ i.name }}
            </div>
            <img
              v-if="k === listKey"
              src="https://cd.sealmg.com/assets/img/news_xuanzhong.png"
              alt="news_xuanzhong"
              class="w-[32%] aspect-[2.25/0.38] absolute -bottom-2 left-1/2 -translate-x-1/2 object-cover"
              loading="lazy"
              title="news_xuanzhong"
            />
          </div>
        </div>
        <NuxtLink v-for="(i, k) in list" :key="k" :to="goPage(i)" class="last:border-none flex justify-between gap-4 py-4 border-b">
          <div class="flex flex-col justify-between w-full">
            <h1 class="font-400 text-[0.88rem] text-[#262626] line-clamp-1 lg:line-clamp-2">
              {{ i.title }}
            </h1>
            <div class="flex items-center justify-between w-full gap-1">
              <el-tag type="danger" size="mini" class="line-clamp-1">{{ i.category.name }}</el-tag>
              <!-- <p class="font-400 text-[0.73rem] text-[#999999]">SEALFM官方</p> -->
              <p class="font-400 text-[0.73rem] text-[#999999] line-clamp-1">
                {{ i.publish_time_text }}
              </p>
            </div>
          </div>
          <div class="w-[30%] aspect-video rounded-[0.25rem] bg-white flex-none">
            <img v-lazy="$globalFn.imgPrefixUrl(i.cover || '')" class="size-full object-cover" :alt="i.cover_alt || ''" :title="i.cover_alt || ''" />
          </div>
        </NuxtLink>
        <NuxtLink
          :to="readmore()"
          class="cursor-pointer h-[2.75rem] flex justify-center items-center font-500 gap-1 text-[0.75rem] text-[#999999] bg-[#F0F0F0]"
        >
          <span class="leading-none">{{ $t('pages.readMore') }}</span>
          <span class="leading-none">{{ $t('pages.latestNews') }}</span>
          <span class="el-icon-arrow-right"></span>
        </NuxtLink>
      </div>
      <!-- 优惠活动pc -->
      <!-- 优惠活动pc -->
      <template v-if="active.length">
        <div class="flex-col gap-[3.125rem] py-[2.5rem] lg:flex hidden">
          <h1 class="text-[1.5rem] text-[#666] mx-auto font-bold capitalize">
            {{ $t('pages.hotCards') }}
          </h1>
          <div class="grid grid-cols-3 row-span-2 gap-[1rem]">
            <div class="col-span-1 row-span-2 flex flex-col bg-gray-300 overflow-hidden rounded-[.5rem] cursor-pointer" @click="goPage(active[0])">
              <div class="relative flex-grow">
                <img
                  v-lazy="$globalFn.imgPrefixUrl(active[0].cover || '', 'article')"
                  class="size-full object-cover bg-gray-300"
                  :alt="active[0].cover_alt"
                  :title="active[0].cover_alt"
                  loading="lazy"
                />
                <div
                  class="h-1/2 bg-gradient-to-b from-[rgba(0,0,0,0)] to-[#311411] absolute bottom-0 w-full flex flex-col justify-end text-white p-[1.25rem]"
                >
                  <h1 class="text-[1.75rem] line-clamp-1">
                    {{ active[0].title }}
                  </h1>
                  <p class="text-[1rem] line-clamp-1">
                    {{ active[0].publish_time_text }}
                  </p>
                </div>
              </div>
              <div class="h-[4.5rem] bg-[#FF4D32] flex justify-center w-full items-center text-[1.25rem] text-white font-semibold">
                {{ active[0].category.name }}
              </div>
            </div>
            <div class="col-span-2 row-span-2 grid grid-cols-2 gap-[1rem]">
              <NuxtLink
                class="border col-span-1 flex flex-col bg-white group h-[20.4375rem] rounded-[.5rem] overflow-hidden cursor-pointer"
                v-for="(i, k) in active.length && active.slice(1, 5)"
                :key="k"
                :to="goPage(i)"
              >
                <div class="h-[14.1875rem] w-full relative overflow-hidden" v-if="i.cover">
                  <img
                    v-lazy="$globalFn.imgPrefixUrl(i.cover || '', 'article')"
                    class="group-hover:scale-110 size-full object-cover transition-all duration-500"
                    :alt="i.title"
                    :title="i.title"
                  />
                  <div
                    class="bg-[#443843]/60 h-[2.5rem] line-clamp-1 w-full z-10 absolute bottom-0 flex justify-center items-center text-[1rem] text-white"
                  >
                    {{ i.category.name }}
                  </div>
                </div>
                <div class="px-[1rem] flex flex-col justify-evenly flex-grow">
                  <p class="text-[1.125rem] font-semibold line-clamp-1">
                    {{ i.title }}
                  </p>
                  <div class="flex items-center">
                    <i class="el-icon-time text-[1rem]" />
                    <span class="text-[1rem] text-[#666666] ml-[.3125rem]">
                      {{ i.publish_time_text }}
                    </span>
                  </div>
                </div>
              </NuxtLink>
            </div>
          </div>
        </div>
      </template>
      <!-- 优惠活动h5 -->
      <!-- 优惠活动h5 -->
      <template v-if="active.length">
        <div class="max-lg:flex flex-col hidden px-4 overflow-hidden py-[1.25rem]">
          <div class="lg:text-[1.5rem] text-[1.5rem]/80 font-bold text-[#666] flex justify-start mb-4">
            <span>{{ $t('pages.hotCard') }}</span>
          </div>
          <div class="flex overflow-x-scroll gap-[1rem]">
            <NuxtLink class="flex flex-col w-1/2 gap-1" v-for="(i, k) in newsData && active" :key="k" :to="goPage(i)">
              <div v-if="i.cover" class="aspect-video w-full rounded-[0.25rem] bg-white overflow-hidden">
                <img v-lazy="$globalFn.imgPrefixUrl(i.cover || '')" class="size-full object-cover bg-gray-300" :alt="i.cover_alt" />
              </div>
              <h1 class="font-500 text-[0.75rem] text-[#262626] line-clamp-1">
                {{ i.title }}
              </h1>
              <p class="font-400 text-[0.75rem] text-[#666666]">
                {{ i.publish_time_text }}
              </p>
            </NuxtLink>
          </div>
        </div>
      </template>
      <!-- 公告 pc and  h5 -->
      <!-- 公告 pc and  h5 -->
      <template v-if="notice.length">
        <div class="flex flex-col lg:gap-[3.125rem] lg:py-[2.5rem] max-lg:px-4 max-lg:gap-4 max-lg:py-[1.25rem]">
          <div class="lg:text-[1.5rem] text-[1.5rem]/80 text-[#666] lg:mx-auto font-bold flex max-lg:justify-start capitalize">
            <span>{{ $t('pages.notice') }}</span>
          </div>
          <div class="grid lg:grid-cols-3 grid-cols-1 lg:gap-[2.25rem] max-lg:px-4 max-lg:bg-white rounded-md">
            <NuxtLink
              class="flex-col flex gap-[.5rem] max-lg:border-b last:border-none max-lg:py-4 cursor-pointer"
              v-for="(i, k) in notice"
              :key="k"
              :to="goPage(i)"
            >
              <h2 class="text-[1rem] text-black font-bold line-clamp-1">
                {{ i.title }}
              </h2>
              <p class="text-[.875rem] text-[#666] line-clamp-2">
                {{ i.description }}
              </p>
              <div class="flex items-center justify-between">
                <span class="text-[.875rem]">{{ i.publish_time_text }}</span>
                <!-- <img src="" alt="" class="size-[20px] bg-gray-200" /> -->
                <i class="el-icon-d-arrow-right text-[.875rem]"></i>
              </div>
            </NuxtLink>
          </div>
        </div>
      </template>
      <div class="flex flex-col divide-y">
        <span v-for="(i, k) in 2" :key="k"></span>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    layout: 'newsPage',
    head() {
      return {
        title: 'SEALMG News - Tournaments, Promotions & Announcements',
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: 'Get the latest updates on tournaments, promotions, and announcements at SEALMG. Discover game top-ups, vouchers, and more.'
          }
        ]
      }
    },
    data() {
      return {
        // PC端轮播图配置
        swiperOption: {
          touchEnabled: true, // 触摸滑动
          touchRatio: 1, // 触摸滑动比例
          speed: 1000, // 切换速度
          loop: true, // 循环播放
          autoplay: true, // 自动播放
          delay: 2000, // 自动播放间隔时间
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        },
        // 移动端轮播图配置
        swiperOptions: {
          touchEnabled: true, // 触摸滑动
          touchRatio: 1, // 触摸滑动比例
          speed: 1000, // 切换速度
          loop: true, // 循环播放
          loopPreventsSlide: true, // 防止循环模式下触摸滑动卡顿
          autoplay: true, // 自动播放
          delay: 2000, // 自动播放间隔时间
          slidesPerView: 1, // 同时显示的slide数量
          spaceBetween: 9, // slide之间的间距
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        },
        // 新闻列表数据
        list: [], // 当前显示的新闻列表
        listCopy: [], // 新闻列表备份
        listKey: 0, // 当前选中的新闻分类索引
        active: [], // 活动新闻数据
        notice: [], // 公告数据
        newsData: [] // 新闻页面所有数据
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getNewsList()
    },
    async asyncData({ $axios }) {
      try {
        // 并发请求获取新闻数据
        const [activeNews, noticeNews, indexData] = await Promise.all([
          $axios.get('api/news/list', {
            params: {
              cid: '',
              code: 'news_activity',
              limt: 5
            }
          }),
          $axios.get('api/news/list', {
            params: {
              cid: '',
              code: 'news_notice',
              limt: 3
            }
          }),
          $axios.get('api/news/index')
        ])
        return {
          active: activeNews,
          notice: noticeNews,
          newsData: indexData
        }
      } catch (error) {
        console.error('获取新闻数据失败:', error)
        return {
          active: [],
          notice: [],
          newsData: []
        }
      }
    },
    methods: {
      // 阅读更多
      readmore() {
        let code = this.newsData.game_news[this.listKey].code
        let path = this.localePath(`/news-category/${code}`)
        return path
      },
      //跳转页面
      goPage(item) {
        let code = item.code
        code = code.replace(/\s+/g, '-')
        let path = this.localePath(`/news/${code}`)
        return path
      },
      // 获取优惠活动
      async getactivities() {
        let res = await this.$axios.get('api/news/list?cid=&code=news_activity&limt=5')
        this.active = res
      },
      // 获取公告
      async getacnotic() {
        let res = await this.$axios.get('api/news/list?cid=&code=news_notice&limt=3')
        this.notice = res
      },
      // 获取新闻列表
      async getNewsList(code, key) {
        let codes = code || this.newsData.game_news[0].code
        const res = await this.$axios.get(`/api/news/list?cid=&code=${codes}`)
        if (key) {
          this.list = res
        } else {
          this.list = res
          this.listCopy = res
        }
      },
      // 切换新闻分类
      changeTab(i, k) {
        this.listKey = k
        this.getNewsList(i.code, 2)
      }
    }
  }
</script>
<style lang="less" scoped>
  .swiper-button-prev {
    background-image: none;
  }
  .swiper-button-next {
    background-image: none;
  }
</style>
